module.exports = {
    mode:'none',
    //指定入口文件
    entry:{
        index:'./src/index.js'
    },
    //指定输出
    output:{
        path:path.join(__dirname,'./build'),
        filename:'buncle[hash:5].js'
    },
    //开发服务器
    devServer:{
        //配置端口
        port:9090,
        //配置代理
        proxy:{
            '/api':{
                //目标地址
                target:'http://localhost:3000',
            }
        }
    },
    
    module:{
        rules:[
            {
                //js文件的加载与打包，并把ES6+代码转成ES5
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                //css文件的加载与打包，并实现css3样式在浏览器中的兼容
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //实现sass文件加载与打包
                test:/\.s[ac]ss$/,
                use:['sass-loader']
            },
            {
                //图片文件的加载与打包，小于  8K  的图片自动转成base64编码
                test:/\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:8000,
                    }
                }
            }
        ]
    },
    //plugins插件：处理loader之外的一些自动化操
    plugins:[
        //自动生成一个html文件
        new HtmlWebpackPlugin({
            //指定模板生成html文件
            template:'./src/index.html'
        }),
        //自动清除输入目录
        new CleanWebpackPlugin(),
    ]
}  